<template>
	<view style="position: relative;">
		<u-navbar title="计算机组成原理" placeholder :bgColor="bgColor" :border="false" autoBack :fixed="false"></u-navbar>
		<view class="icon-btns">
			<view class="mr-30 clock">
				<view class=""><u-icon name="clock" size="18"></u-icon></view>
				<view class="ml-10">00:12</view>
			</view>
			<view class="right">
				<view class="mr-20 w21">
					<u-icon name="search" size="24"></u-icon>
				</view>
				<view class="w21" style="transform: rotate(90deg);">
					<u-icon name="more-dot-fill" size="18"></u-icon>
				</view>
			</view>
		</view>

		<swiper :indicator-dots="false" :autoplay="false" @change="onChange" :current="current">

			<swiper-item v-for="i in questions" :key="i">
				<view class="swiper-item">
					<view class="count">
						<view class="current">{{current+1}}</view>
						<view class="length">/{{questions.length}}</view>
					</view>
					<view class="topic">
						<view class="topic-type">
							<view class="tag">选择题</view>
							<view class="star">
								<u-icon name="star" color="#3d3d3d" size="15"></u-icon>
							</view>
						</view>
						<view class="topic-content">
							题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目
						</view>
					</view>
					<view class="options">
						<view class="option-item" v-for="i in 4 " :key="i" :class="{active:i==1}">
							<view class="code">A</view>
							<view class="answer">选项1选项1选项1选项1选项1选项1选项1选项1选项1</view>
						</view>
					</view>
				</view>
			</swiper-item>

		</swiper>
		<view class="btns">
			<view class="btn last">上上签</view>
			<view class="btn next mt-40" @click="next">下下签</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgColor: "transparent",
				current: 0,
				questions: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
			};
		},
		methods: {
			onChange(e) {
				this.current = e.detail.current
			},
			next() {
				if (this.current == this.questions.length - 1) return
				this.current++
			}
		}
	}
</script>

<style lang="scss" scoped>
	.icon-btns {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx;
		box-sizing: border-box;
		color: #3d3d3d;

		.clock {
			width: fit-content;
			height: 21px;
			display: flex;
			align-items: center;
			font-size: 30rpx;
		}

		.right {
			display: flex;
			align-items: center;

			.w21 {
				width: 21px;
				height: 21px;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

	}




	swiper {
		width: 100%;
		padding: 20rpx;
		position: relative;
		box-sizing: border-box;
		min-height: 84vh;



		swiper-item {
			width: 100%;


			.swiper-item {
				width: 100%;
				position: relative;

				.count {
					position: absolute;
					right: 30rpx;
					top: 70rpx;
					display: flex;
					justify-content: center;
					color: #3d3d3d;
					font-size: 24rpx;
					z-index: 99;
					align-items: baseline;

					.current {
						font-size: 48rpx;
						color: #58A3F8;
					}

				}

				.topic {
					background-color: #fcfcfc;
					padding-right: 120rpx;


					.topic-type {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.tag {
							width: fit-content;
							color: #fff;
							font-size: 18rpx;
							padding: 6rpx 14rpx;
							background-color: #58A3F8;
							display: flex;
							align-items: center;
							justify-content: center;
							border-radius: 34rpx;
						}
					}

					.topic-content {
						font-size: 28rpx;
						margin-top: 38rpx;
						line-height: 52rpx;
						padding-bottom: 40rpx;
						font-weight: 600;
						color: #3D3D3D;
					}
				}

				.options {
					padding: 60rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					margin-top: 40rpx;

					.option-item {
						width: 100%;
						height: 108rpx;
						display: flex;
						align-items: center;
						padding: 20rpx;
						box-sizing: border-box;
						margin-bottom: 8rpx;
						color: #3D3D3D;
						font-weight: 600;

						.code {
							width: 20%;

						}

						.answer {
							flex: 1;
							font-size: 28rpx;
							line-height: 40rpx;

						}
					}

					.option-item.active {
						border-radius: 20rpx;
						background: #E4EFFD;

					}
				}
			}
		}
	}

	.btns {
		position: fixed;
		right: 62rpx;
		bottom: 122rpx;
		z-index: 99;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.btn {
			width: 200rpx;
			height: 74rpx;
			border-radius: 160rpx;
			opacity: 1;
			font-size: 32rpx;
			font-weight: 600;
			text-align: center;
			line-height: 74rpx;
		}

		.last {
			background: #F8F5F4;
			color: #3D3D3D;
		}

		.next {
			background: #58A3F8;
			color: #fff;
		}
	}
</style>